var all = document.querySelectorAll("select");
fillProvinces();
fillCities(1);
fillCounties(1)

all[0].onchange = function (){
    var proID = this.value;   // dom事件处理程序中的this指代那个dom元素
    fillCities(proID);
    fillCounties(all[1].value);
}
all[1].onchange = function (){
    var cityID = this.value;
    fillCounties(cityID);
}

/**
 * 填充所有的省份的信息
 */
function fillProvinces(){
    var provinceList = data.provinceList;
    for (var province of provinceList){
        var proName = province.ProName;
        var proID = province.ProID;
        var opt = createOption(proName, proID);
        all[0].appendChild(opt);
    }
}

function fillCities(proID){
    all[1].innerHTML = "";
    var cities = data.cityList;
    for(var city of cities){
        if(proID == city.ProID){
            var opt = createOption(city.CityName, city.CityID);
            all[1].appendChild(opt);
        }
    }
}

function fillCounties(cityID){
    all[2].innerHTML = ""
    var counties = data.countyList;
    for(var county of counties){
        if(cityID == county.CityID){
            var opt = createOption(county.DisName, county.ID);
            all[2].appendChild(opt);
        }
    }
}
function createOption(text, value){
    var option = document.createElement("option");
    option.value = value;
    option.innerHTML = text;
    return option;
}